<template>
	<view class="interact">
		<uni-icons class="icon" type="redo" size="26" @click="onClickShare"></uni-icons>
		<uni-icons class="icon" type="chat" size="26" @click="onClickComment"></uni-icons>
		<uni-icons v-if="like===false" class="icon" type="hand-up" size="26" @click="onClickLike">
			<text class="text">
				{{countLike}}
			</text>
		</uni-icons>
		<uni-icons v-else class="icon" type="hand-up-filled" size="26" color="#E09AB5" @click="onClickLike">
			<text class="text">
				{{countLike}}
			</text>
		</uni-icons>
		<uni-icons class="icon" type="info" size="26" @click="onClickReport"></uni-icons>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const like = ref(false);
	const dislike = ref(false);
	const countLike = ref(2333);

	function onClickShare() {
		console.log("分享请求");
	}

	function onClickComment() {
		console.log("评论请求");
	}

	function onClickLike() {
		console.log("点赞请求");
		if (like.value === false) {
			countLike.value += 1;
		} else {
			countLike.value -= 1;
		}
		like.value = !like.value;
	}

	function onClickReport() {
		console.log("举报请求");
	}
</script>

<style lang="scss">
	.interact {
		// display: flex;
		// justify-content: space-between;
	}

	.icon {
		margin: 0rpx 10rpx 0rpx 10rpx;
	}

	.text {
		font-size: 30rpx;
	}
</style>